<template>
  <div class="delete-avator-wrap">
    <div class="avator-box">
      <el-avatar :size="size" :src="user.avatar" :class="{'fly-notice-user': isFlyUser}" @error="errorHandler">
        <img :src="adminIcon">
      </el-avatar>
      <img v-if="isFlyUser" :src="flyUserTag" class="fly-notice-tag">
      <div v-if="!disable && !isFlyUser" :style="{width: size * 0.4 + 'px', height: size * 0.4 + 'px',}" class="delete-btn" @click="deleteFun">
        <img :src="closeBtn">
      </div>
      <div v-if="user.userStatus" :style="{width: size * 0.4 + 'px', height: size * 0.4 + 'px',}" class="delete-btn">
        <img :src="statusIcons[user.userStatus]">
      </div>
      <div v-else-if="user.isRead === 1" :style="{width: size * 0.4 + 'px', height: size * 0.4 + 'px',}" class="delete-btn">
        <img :src="readIcon">
      </div>
    </div>
    <span class="name">{{ user.userName }}</span>
  </div>
</template>
<script>
import adminIcon from '@/assets/user-avatar.png';
import closeBtn from '@/assets/close_btn.png';
import readIcon from '@/assets/auditProcess/status1.png';
import userStatus1 from '@/assets/auditProcess/userStatus/status_1.png';
import userStatus2 from '@/assets/auditProcess/userStatus/status_2.png';
import userStatus3 from '@/assets/auditProcess/userStatus/status_3.png';
import userStatus4 from '@/assets/auditProcess/userStatus/status_4.png';
import userStatus5 from '@/assets/auditProcess/userStatus/status_5.png';
import flyUserTag from '@/assets/auditProcess/userStatus/flyUserTag.png';
import flyUserBorder from '@/assets/auditProcess/userStatus/flyUserBorder.png';
export default {
  name: 'DeleteAvator',
  props: {
    size: {
      type: Number,
      default: 40
    },
    user: {
      type: Object,
      default: () => {
        return null;
      }
    },
    disable: {
      type: Boolean,
      default: false
    },
    isFlyUser: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      adminIcon,
      readIcon,
      userStatus1,
      userStatus2,
      userStatus3,
      userStatus4,
      userStatus5,
      flyUserBorder, flyUserTag,
      closeBtn
    };
  },
  computed: {
    statusIcons() {
      return {
        1: userStatus1,
        2: userStatus2,
        3: userStatus3,
        4: userStatus4,
        5: userStatus5
      };
    }
  },
  methods: {
    errorHandler() {
      return true;
    },
    deleteFun() {
      this.$emit('deleteFun');
    }
  }
};
</script>
<style lang="scss" scoped>
.delete-avator-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .name {
    margin-top: 4px;
    font-size: 12px;
    color: #999999;
  }
}
.avator-box {
  position: relative;
  &::v-deep {
    .el-avatar{
      img{
        width: 100% !important;
      }
    }
  }
  .fly-notice-user {
    // background-image: linear-gradient(to bottom, rgb(123, 93, 255) 0%, rgb(56, 225, 255) 100%);
    background-image: url(../../assets/auditProcess/userStatus/flyUserBorder.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding:2px;
    box-sizing:border-box;
    &::v-deep {
      img {
        border-radius: inherit;
      }
    }
  }
  .fly-notice-tag {
    position: absolute;
    width: 40px;
    left: 0;
    bottom: 0;
  }
  .delete-btn {
    cursor: pointer;
    position: absolute;
    display: flex;
    overflow: hidden;
    right: -3px;
    top: 0px;
    width: 16px;
    height: 16px;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
